<template>
  <div class="time_deposit_page">
    <payer-account @onChange="payerChange"></payer-account>
    <div class="transfer_payee_box">
      <van-cell title="转存金额" class="payee_input">
        <template #label>
          <div class="amount_box">
            <span class="currency">¥</span>
            <van-field class="amount_input" v-model="form.amount" placeholder="请输入金额" />
          </div>
        </template>
      </van-cell>
      <van-field label="大写金额" input-align="right">
        <template #input><span>{{form.amount | convertToChinaNum}}</span></template>
      </van-field>
    </div>
    <div class="financial">
      <van-cell is-link title="存期"
                @click="selectItem('deadline')">
        <template #default>{{deposits[form.deposit]}}</template>
      </van-cell>
      <van-cell title="利率" :value="form.rate" />
      <van-cell is-link title="到期自动转存"
                @click="selectItem('automatic')">
        <template #default>{{automaticItems[form.autoSaveType]}}</template>
      </van-cell>
      <van-field label="备注" placeholder="请输入备注" rows="1" type="textarea"
                 autosize v-model="form.remark" />
    </div>
    <div class="next">
      <van-button type="info" @click="next" block>提交</van-button>
    </div>

    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <van-popup class="right_popup payees_popup" v-model="showPayee" position="right"
               :style="{ width: '70%', height: '100%' }">
      <van-cell v-for="(item, index) in accountList" :key="index" center is-link
                :title="item.name" :label="item.account"
                @click="checkPayee(item)" />
    </van-popup>
    <van-number-keyboard
      theme="custom"
      extra-key="."
      :show="showKeyboard"
      :maxlength="20"
      close-button-text="完成"
      @show="onKeyboardShow"
      @input="onKeyboardInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>
<script>
import {
  NumberKeyboard
} from 'vant';
import { mapActions } from 'vuex';
import PayerAccount from '@/components/PayerAccount.vue';
// import { paymentAccounts, currencys } from '@/libs/mockData';
import Constants from '@/libs/constant';
import Mocks from '@/libs/mockData';

export default {
  components: {
    [NumberKeyboard.name]: NumberKeyboard,
    PayerAccount
  },
  data() {
    return {
      active: '01',
      checkItem: '',
      show: false,
      actions: [],
      showPayee: false,
      showKeyboard: false,
      form: {
        payerAcNo: '',
        acctNm: '',
        currency: '',
        deposit: '',
        rate: ''
      },
      deposits: Constants.deposits,
      maxDate: new Date(),
      currentTime: '起始日期',
      currentDate: new Date(),
      amount: '0.00',
      timeLimits: [
        { name: '三个月', value: 'M003', rate: '3.68%' },
        { name: '一年', value: 'Y001', rate: '4.09%' },
        { name: '三年', value: 'Y003', rate: '4.47%' }
      ],
      // automaticItems: [
      //   { name: ' ', val: '0' },
      //   { name: '转活期', val: '1' },
      //   { name: '本息续存', val: '3' },
      //   { name: '本金续存', val: '6' }
      // ],
      automaticItems: Constants.automaticItems,
      accountList: Mocks.paymentAccounts
    };
  },
  methods: {
    ...mapActions(['saveFormData']),
    selectItem(item) {
      // console.log(item);
      this.checkItem = item;
      this.show = true;
      // const types = [{ name: '行内转账', value: '01' }, { name: '全国转账', value: '02' }];
      if (item === 'deadline') {
        this.actions = this.timeLimits;
      } else if (item === 'automatic') {
        // this.actions = this.automaticItems;
        this.actions = this.objectToList(Constants.automaticItems);
      }
    },
    objectToList(val) {
      const list = Object.keys(val).map((key) => {
        const item = { val: key, name: val[key] };
        return item;
      });
      return list;
    },
    onSelect(item) {
      console.log(item);
      this.show = false;
      if (this.checkItem === 'deadline') {
        this.form.deposit = item.value;
        this.form.rate = item.rate;
      } else if (this.checkItem === 'automatic') {
        this.form.autoSaveType = item.val;
      }
    },
    openModal() {
      this.showPayee = true;
    },
    payerChange(payer) {
      console.log(payer);
      this.form.payerAcNo = payer.acNo;
      this.form.acctNm = payer.acName;
      this.form.currency = payer.currency;
    },
    checkPayee(payee) {
      this.showPayee = false;
      this.form.payerAcNo = payee.account;
      this.form.acctNm = payee.name;
    },
    onKeyboardShow() {
      console.log(this.amount);
      this.amount = '';
    },
    onKeyboardInput(value) {
      if (this.amount === '0.00') {
        this.amount = value;
      } else {
        this.amount = `${this.amount}${value}`;
      }
    },
    onDelete() {
      this.amount = this.amount.substr(0, this.amount.length - 1);
    },
    next() {
      this.saveFormData(this.form);
      this.$router.push('/timeDepositConfirm');
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      }
      return `${val}月`;
    },
    checkDate(val) {
      const options = { year: 'numeric', month: 'long' };
      this.currentTime = val.toLocaleDateString('zh', options);
      this.$refs.item.toggle();
    },
    cancelDate() {
      this.$refs.item.toggle();
    }
  },
  mounted() {
    // this.form.deposit = this.timeLimits[0].name;
    // this.form.rate = this.timeLimits[0].rate;
    this.form.autoSaveType = this.automaticItems[0].name;
  }
};
</script>
<style lang="less">
  .time_deposit_page{
    height: 100%;
    background-color: #EFEFEF;
    overflow-y: auto;
    .van-field__control{
      text-align: right;
    }
    .payment_account_box {
      margin-top: 0.5rem;
      .balance .van-cell__value {
        color: #223968;
      }
      .currency {
        background: rgba(#0173FF, 0.1);
        border-radius: 4px;
        color: #0173FF;
        font-size: 0.75rem;
        line-height: 1rem;
        padding: 0.188rem;
      }
    }
    .payees_popup {
      .van-cell__title{
        max-width: 100%;
      }
    }
    .transfer_payee_box{
      padding-top: 1vh;
      .payee_input{
        .van-cell__title{
          /*width: 100%;*/
          max-width: 100%;
        }
      }
      .amount_box{
        font-size: 1.5rem;
        color: #223968;
        padding-top: 0.313rem;
      }
      .amount_input{
        width: 95%;
        text-align: left;
        display: inline-flex;
        padding-left: 0.5rem;
        border: none;
        font-size: 1.2rem;
        line-height: 1.2rem;
        .van-field__control{
          text-align: left;
        }
      }
    }
    .account_info {
      margin-top: 0.5rem;
    }

    .amount {
      text-align: center;
      .title {
        padding: 1rem;
      }
      .input_box{
        background-color: #fff;
        margin-left: 5%;
        width: 90%;
        height: 7rem;
        border-radius: 0.5rem;
        .input_account{
          font-size: 18PX;
          line-height: 80PX;
          height: 80PX;
          font-weight: bold;
          .van-cell__title{
            max-width: 0;
          }
          .van-field__label{
            text-align: center;
          }
        }
      }
    }
    .financial{
      margin-top: 1rem;
    }
    .next{
      padding: 1.5rem 1rem;
    }
    .van-cell__title{
      max-width: 40%;
      font-weight: bold;
    }
    .van-field__label{
      width: 6.5rem;
    }
  }
</style>
